<template>
  <!-- <img src="" alt=""> -->
  <div>
    <div
      class="relative border rounded mr-2 overflow-hidden"
      style="width: 100px; height: 100px"
      v-for="(img, index) in imgs"
      :key="index"
    >
      <el-image :src="img" :fit="['cover']" />
      <el-icon
        :size="20"
        color="white"
        class="bg-gray-500 p-1 cursor-pointer bor rounded-1\2 absolute right-[0px] top-[2px]"
        @click="deletImg(img)"
      >
        <Close />
      </el-icon>
    </div>
  </div>
  <!-- 按钮/ -->
  <div
    @click="visible = !visible"
    class="cursor-pointer w-[100px] h-[100px] border border-dashed flex justify-center items-center hover:bg-gray-100"
  >
    <el-icon color="#999">
      <Plus />
    </el-icon>
  </div>

  <el-dialog v-model="visible" title="选择图片">
    <div class="flex h-[80vh]">
      <ImageAside ref="ImageAsideRef" @change="change" />
      <ImageMain ref="ImageMainRef" @choose="changeImgArr" openChoose />
    </div>
    <div class="flex flex-end">
      <el-button size="small" @click="visible = false">取消</el-button>
      <el-button type="primary" size="small" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from '@vue/reactivity'
import ImageAside from '@/components/ImageAside.vue'
import ImageMain from '@/components/ImageMain.vue'
const visible = ref(false)
const props = defineProps({
  modelValue: String | Array,
  limit: {
    default: 1,
    type: Number,
  },
})

const emit = defineEmits(['update:modelValue'])
const imgs = computed(() =>
  Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
)

const ImageAsideRef = ref(null)
const ImageMainRef = ref(null)

const change = (id) => {
  ImageMainRef.value.loadData(id)
}

let chooseImg = ref('')
const changeImgArr = (imgs) => {
  chooseImg.value = imgs
  console.log(imgs, 'v-if="scope.row.taskStatus == 0"')
}

const deletImg = (img) => {}
const confirm = () => {
  visible.value = false
  emit('update:modelValue', chooseImg.value[0].url)
}
</script>
